<template>
  <div>
    <img class="icon" :src="shopDetail.url" mode="widthFix">

    <div class="content">

      <div class="name_distance">
        <div class="name">{{shopDetail.name}}</div>
        <div class="distance">{{shopDetail.distance>1000 ? shopDetail.distance/1000 + 'km' : shopDetail.distance + 'm'}}</div>
      </div>

      <div class="describe">
        <div class="describe_title">店铺介绍</div>
        <div class="describe_word">{{shopDetail.description}}</div>
      </div>

      <div class="place_navigation_cell">
        <div class="place">
          <img class="place_icon" src="https://static.music.daoyintech.com/addressicon.png" alt="">
          <div class="place_word">{{shopDetail.address}}</div>
        </div>
        <div class="navigation_cell">
          <img class="navigation_icon" @click="gonavigation"  src="https://static.daoyintech.com/daohang.png" alt="">
          <img class="cell_icon" @click="cell" src="https://static.daoyintech.com/cell-icon.png" alt="">
        </div>
      </div>

    </div>

    <img class="detail_icon" :src="shopDetail.detailUrl" mode="widthFix">
    
  </div>
</template>
<script>
  export default {
    data () {
      return {
        shopDetail:null
      }
    }, 
    onLoad(option){
      console.log(option.item)
      this.shopDetail = JSON.parse(option.item)
    },
    onShow(){
     
     
    },
    methods:{
      gonavigation(){
        let longitude = this.shopDetail.longitude
        let latitude = this.shopDetail.latitude
        wx.openLocation({
          latitude: parseFloat(latitude),
          longitude: parseFloat(longitude)
        })
      },
      
      //拨打电话
      cell(){
        let arr = this.shopDetail.description.split(':')
        let phone = arr[arr.length-1]
        console.log(phone)
        wx.makePhoneCall({
          phoneNumber: phone
        })
      }
    }
  }
</script>

<style scoped>
  .icon{
    width: 100%;
    display: block;
  }
  .content{
    padding: 30rpx;
  }
  .name_distance{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 40rpx;
    border-bottom: 2rpx solid #EEEEEE;
  }
  .name{
    font-size: 34rpx;
    color: #000;
    line-height: 26rpx
  }
  .distance{
    font-size: 26rpx;
    color: #999999;
    line-height: 28rpx
  }
  .describe{
    padding: 20rpx 0;
    border-bottom: 2rpx solid #EEEEEE;
  }
  .describe_title{
    font-size: 28rpx;
    color: #2B2B2B
  }
  .describe_word{
    font-size: 26rpx;
    color: #666666;
    line-height: 40rpx
  }
  .place_navigation_cell{
    display: flex;
    padding: 20rpx 0;
    justify-content: space-between;
    align-items: center;

  }
  .place{
    display: flex;
    align-items: center;
  }
  .place_icon{
    width: 20rpx;
    height: 24rpx;
  }
  .place_word{
    width: 470rpx;
    margin-left: 5rpx;
    font-size: 28rpx;
    color: #2B2B2B;
  }

  .navigation_cell{
    display: flex;
    align-items: center;
  }
  .navigation_icon{
    width: 40rpx;
    height: 40rpx;
  }
  .cell_icon{
    width: 40rpx;
    height: 40rpx;
    margin-left: 35rpx;
  }

  .detail_icon{
    border-top: 30rpx;
    width: 100%;
    display: block;
  }
</style>
